<template>
  <div class="home">
        <van-search placeholder="请输入搜索关键词" v-model="value" />
    <van-tabs v-model="active" sticky  title-active-color='green' class="sfNav" :line-width="58" color='green'>
    <van-tab v-for="(i,index) in title" :title="i.name" :key='index' >
      </van-tab>
    </van-tabs>
      <van-swipe :autoplay="5000" indicator-color="white">
        <van-swipe-item v-for='(img,index) in images' :key="index"><img :src="img" alt="" class="testswipe"></van-swipe-item>
      </van-swipe>
      <div class="lable" style="background:url(https://ps.sfimg.cn/mapp/resource/3f/3f45f49ab875be791e799d9f6cf9df22.jpg) #ffffff 0 0 no-repeat;background-size:100% 100%;">
          <span><i class="gouxuan"><img src="https://ps.sfimg.cn/mapp/resource/cf/cfacfab79b23ceae0965c8ef9e792359.png"></i>全球美食</span>
          <span><i class="gouxuan"><img src="https://ps.sfimg.cn/mapp/resource/10/102c9b7a25e900c83ab94ec165c93a95.png"></i>全程品控</span>
          <span><i class="gouxuan"><img src="https://ps.sfimg.cn/mapp/resource/a7/a75a30c74a9e8f961c237e087a26fdd0.png"></i>服务到家</span>
          <span><i class="gouxuan"><img src="https://ps.sfimg.cn/mapp/resource/f1/f10cd2e4c03864eb7bba84761bf8e415.png"></i>顺丰冷链</span>
			</div>
      <div id="productimg" class="product-login">
        <div class="swiper-slide">
          <a href="" class="">
              <img src="https://ps.sfimg.cn/mapp/resource/bb/bbf93fbaa1d0f3e3c90f23f83d1accff.png" alt="" class="menu-box-img">
              <span class="omit1">送礼神器</span>
          </a>
        </div>
        <!-- 导航 -->
        <div id="productimg" class="product-login">
          <div class="swiper-slide">
            <router-link :to="`present`">
              <img
                src="https://ps.sfimg.cn/mapp/resource/bb/bbf93fbaa1d0f3e3c90f23f83d1accff.png"
                alt
                class="menu-box-img"
              >
              <span class="omit1">送礼神器</span>
            </router-link>
          </div>
          <div class="swiper-slide">
            <a href class>
              <img
                src="https://ps.sfimg.cn/mapp/resource/37/37e172ba0d50d925f7fb41f8975aefbe.png"
                alt
                class="menu-box-img"
              >
              <span class="omit1">全球美食</span>
            </a>
          </div>
          <div class="swiper-slide">
            <a href class>
              <img
                src="https://ps.sfimg.cn/mapp/resource/55/551c8edbc8f9e5904184f908207d2d6f.png"
                alt
                class="menu-box-img"
              >
              <span class="omit1">优选到家</span>
            </a>
          </div>
          <div class="swiper-slide">
            <a href class>
              <img
                src="https://ps.sfimg.cn/mapp/resource/11/11716141b0e6562ada8dcf162d8fba0e.png"
                alt
                class="menu-box-img"
              >
              <span class="omit1">优选国际</span>
            </a>
          </div>
          <div class="swiper-slide">
            <a href class>
              <img
                src="https://ps.sfimg.cn/mapp/resource/f5/f5cc96b06fd90552ce2d6acb206ba73c.png"
                alt
                class="menu-box-img"
              >
              <span class="omit1">新品尝鲜</span>
            </a>
          </div>
        </div>
        <div class="Scroll">
          <div class="optimal"></div>
          <van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"/>
        </div>
        <img
          src="https://ps.sfimg.cn/mapp/resource/db/dba1bddce8779a302d1b2eca28deb67c.jpg"
          alt
          class="illustration"
        >
        <div class="New-Products">新品推荐</div>
        <div class="p-col-3">
          <ul>
            <li v-for="ios in products" :key="ios._id" :to="`list${ios._id}`">
              <a href="#">
                <div>
                  <img :src="serverUrl+ios.coverImg">
                </div>
                <div class="p-info">
                  <div class="p-name omit1">{{ios.name}}</div>
                  <div class="p-price">{{ios.price}}</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="floor banner-three">
          <div class="fl">
            <a href="/product/info/312259">
              <img src="https://ps.sfimg.cn/mapp/resource/27/27356e609f96ff00416089637ecd3829.jpg">
            </a>
          </div>
          <div class="fr">
            <a href="/product/info/295503">
              <img src="https://ps.sfimg.cn/mapp/resource/79/79430b8d5568901532d702fdab1b6fc2.jpg">
            </a>
            <a href="/product/info/275063">
              <img src="https://ps.sfimg.cn/mapp/resource/0e/0eae1cef1ec085e3007315272af60296.jpg">
            </a>
          </div>
        </div>
        <van-swipe :autoplay="5000" indicator-color="white">
          <van-swipe-item v-for="(img,index) in images" :key="index">
            <img :src="img" alt class="butswipe">
          </van-swipe-item>
        </van-swipe>
        <van-swipe :autoplay="5000" indicator-color="white">
          <van-swipe-item v-for="(img,index) in swipe" :key="index">
            <img :src="img" alt class="butswipe">
          </van-swipe-item>
        </van-swipe>
        <!-- 新品推荐 -->
        <div class="New-Products">买手推荐</div>
        <div>
          <ul class="product-ul">
            <router-link
              class="product-list"
              v-for="ios in products"
              :key="ios._id"
              :to="`list/${ios._id}`"
            >
              <img :src="serverUrl+ios.coverImg" alt srcset>
              <span class="product-name">{{ios.name}}</span>
              <span class="product-price">￥{{ios.price}}</span>
            </router-link>
          </ul>
        </div>
        <div class="New-Products">优选国际</div>
        <van-swipe :autoplay="5000" indicator-color="white">
          <van-swipe-item v-for="(img,index) in swipe2" :key="index">
            <img :src="img" alt class="butswipe">
          </van-swipe-item>
        </van-swipe>
        <div class="ht-item">
          <div class="ht-item-name">优选全球营养</div>
          <div class="ht-item-describe">网罗世界好货 助力健康前行</div>
        </div>
        <ul class="product-ul">
          <router-link
            class="product-list"
            v-for="ios in products"
            :key="ios._id"
            :to="`list/${ios._id}`"
          >
            <img :src="serverUrl+ios.coverImg" alt srcset>
            <span class="product-name">{{ios.name}}</span>
            <span class="product-price">￥{{ios.price}}</span>
          </router-link>
        </ul>
        <div class="ht-item">
          <div class="ht-item-name">优选母婴用品</div>
          <div class="ht-item-describe">呵护宝妈生活 挚爱优选百货</div>
        </div>
        <ul class="product-ul">
          <router-link
            class="product-list"
            v-for="ios in products"
            :key="ios._id"
            :to="`list/${ios._id}`"
          >
            <img :src="serverUrl+ios.coverImg" alt srcset>
            <span class="product-name">{{ios.name}}</span>
            <span class="product-price">￥{{ios.price}}</span>
          </router-link>
        </ul>
        <div class="ht-item">
          <div class="ht-item-name">优选美妆个护</div>
          <div class="ht-item-describe">保持年轻姿态 展现时尚风采</div>
        </div>
        <ul class="product-ul">
          <router-link
            class="product-list"
            v-for="ios in products"
            :key="ios._id"
            :to="`list/${ios._id}`"
          >
            <img :src="serverUrl+ios.coverImg" alt srcset>
            <span class="product-name">{{ios.name}}</span>
            <span class="product-price">￥{{ios.price}}</span>
          </router-link>
        </ul>
        <van-tabs>
          <van-tab v-for="(j,index) in recommend" :title="j.name" :key="index">
            <div v-if="index==0">
              <ul class="product-ul">
                <router-link
                  class="product-list1"
                  v-for="ios in portone"
                  :key="ios._id"
                  :to="`list/${ios._id}`"
                >
                  <img :src="serverUrl+ios.coverImg" alt srcset>
                  <span class="product-name1">{{ios.name}}</span>
                  <span class="product-price">￥{{ios.price}}</span>
                </router-link>
              </ul>
            </div>
            <div v-if="index==1">ehha</div>
          </van-tab>
        </van-tabs>
      </div>
      <div v-if="active==1">
        <img src="https://ps.sfimg.cn/mapp/resource/84/849db485c7124a8b4ca9b3683eed81d4.jpg" alt=""  class="picture">
        <div v-for="test in products" :key="test._id" :to="`list${test._id}`">
          <van-card
            tag="新品"
           :price="test.price"
           :desc="test.descriptions"
           :title="test.name"
           :thumb="serverUrl+test.coverImg"
            origin-price="1000"
          >
          <div slot="footer" class="">
            <van-button size="mini" class="btncart"></van-button>
          </div>
</van-card>
        </div>
      </div>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import { serverUrl } from "../utils/config";
import { get } from "axios";
import { getProducts } from "../servers/products.js";
import { addToShopCart } from "../servers/user.js";
export default {
  name: "home",
  data() {
    return {
      suoyin: 0,
      serverUrl,
      active: 0,
      shopCart: 0,
      active2: 0,
      page: 2,
      products: [],
      portone: [],
      value: "",
      recommend: [
        {
          name: "为你推荐"
        },
        {
          name: "果蔬"
        },
        {
          name: "肉类"
        },
        {
          name: "海鲜"
        },
        {
          name: "酒水"
        },
        {
          name: "粮油"
        },
        {
          name: "速食"
        },
        {
          name: "冲调"
        },
        {
          name: "家具用品"
        },
        {
          name: "营养保健"
        }
      ],
      title: [
        {
          name: "为你优选"
        },
        {
          name: "海淘全球"
        },
        {
          name: "优选酒窖"
        },
        {
          name: "品质早餐"
        },
        {
          name: "营养正餐"
        },
        {
          name: "悠闲时光"
        },
        {
          name: "快食注意"
        },
        {
          name: "安心乳品"
        },
        {
          name: "烘培中心"
        },
        {
          name: "儿童食谱"
        }
      ],
      images: [
        "https://ps.sfimg.cn/mapp/resource/d3/d36281318b686472f48662ae1f024013.jpg",
        "https://ps.sfimg.cn/mapp/resource/b8/b8806decdf292d6cd34e41d19cc7efde.jpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/11685/25/12324/92798/5c8f7923Ed956b1f0/9f759c0328e565ed.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/20267/22/11962/148094/5c933f1bEefef7c0d/ae849856d4d5835d.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://ps.sfimg.cn/mapp/resource/8f/8f2e91fa546ccf400d002da09ebced12.jpg"
      ],
      swipe: [
        "https://ps.sfimg.cn/mapp/resource/c7/c7801ee97bfbcb2ccf882252ab32596c.png",
        "https://ps.sfimg.cn/mapp/resource/c7/c7801ee97bfbcb2ccf882252ab32596c.png"
      ],
      swipe2: [
        "https://ps.sfimg.cn/mapp/resource/84/84357a4952d0ddcd6e9a0d7678bb58e6.png",
        "https://ps.sfimg.cn/mapp/resource/14/14a3f710032bfe62a0f1a293e9c4919d.jpg"
      ]
    };
  },
  created() {
    // getProducts({page:this.page}
    get(`${serverUrl}/api/v1/products?page=2`, {
      params: {
        per: 8
      }
    })
      .then(res => {
        this.products = this.products.concat(res.data.products);
        console.log(this.products);
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    get(`${serverUrl}/api/v1/products?page=1}`, {
      params: {
        per: 18
      }
    }).then(res => {
      console.log(res.data.data);
      this.portone = res.data.products;
    });
  },

  components: {
  },
  components: {}
};
</script>
<style scoped>
.btncart{
   background: url(https://is.sfimg.cn/webapp/images/webapp2.0/model/index/icon-cart.png)no-repeat 0px 0px;
  background-size: 100%;
  width:30px;
  height:30px;
  border:0;
}
</style>
